<template>
	<div class="news-container">
        <p class="catalogue">
            <router-link to="/alumni" replace>校友服务</router-link>
            <span v-if="$route.query.type == undefined"> > 新闻资讯</span>
            <span v-if="$route.query.type == 'cucoloris'"> > 校友剪影</span>
        </p>
        <div class="clear">
            <aside class="fl">
               <div :class="{active:focus=='information'}" @click="setInformation">
                   <img src="../../../assets/images/新闻资讯.png" height="40" width="40" alt="新闻资讯" />
                   <span>新闻资讯</span>
               </div>
               <div :class="{active:focus=='cucoloris'}" @click="setCucoloris">
                   <img src="../../../assets/images/校友剪影.png" height="40" width="40" alt="校友剪影" />
                   <span>校友剪影</span>
               </div>
            </aside>
            <div class="fr">
                <news-information v-if="focus=='information'" />
                <news-cucoloris v-if="focus=='cucoloris'" />
            </div>
        </div>
    </div>
</template>

<script>
    import newsInformation from './information.vue'
    import newsCucoloris from './cucoloris.vue'
    export default {
        name: 'news',
    	data(){
    		return {
                id:this.$route.query.id,    // 文章id
                bannerList:[],    // 存放轮播信息列表
                focus: "information",     // 用于存放聚焦的板块  cucoloris:剪影   默认资讯
    		}
    	},
        components:{
            newsInformation,
            newsCucoloris
        },
        created(){
            if(this.$route.query.type){
                this.focus = this.$route.query.type;
            }else{
                this.focus = 'information';
            }
        },
        activated(){
            if(this.$route.query.type){
                this.focus = this.$route.query.type;
            }else{
                this.focus = 'information';
            }
        },
    	methods:{
    		get_list(){
    			let success = res => {
                    console.log(res)
                };
                this.$ajax({
                    url: "api/album/albums_list",
                    method: "get",
                    params: {
                        flag: "home",
                        order_type: this.orderType,
                        page_index: this.page_index,
                        page_size: this.page_size,
                        study_section_id: this.study_section_id,
                        grade_id: this.grade_id,
                        subject_id: this.subject_id,
                        keyword: this.keyword
                    },
                    func: { success: success }
                });
    		},
            setInformation(){
                this.$router.replace({path:'/alumni/news'})
                this.focus = 'information'
            },
            setCucoloris(){
                this.$router.replace({path: '/alumni/news', query:{type: 'cucoloris'}})
                this.focus = 'cucoloris'
            }
    	}
    }
</script>


<style lang="scss">
    #alumni{
        .news-container{
            width:1200px;
            margin:0 auto;

            // 目录
            .catalogue{
                // padding-top:15px;
                height:19px;
                line-height:19px;
                font-size: 14px;
                color: #000000;
                letter-spacing: 0;
                span,a{
                    &:last-child{
                        color: #3F3F3F;
                    }
                }
            }
            &>div{
                margin-top:20px;
                margin-bottom:58px;
                aside{
                    box-sizing:border-box;
                    padding:19px 0 23px;
                    width:222px;
                    background: #fff;
                    overflow:hidden;
                    &>div{
                        padding:10px 20px 10px 18px;
                        // height:60px;
                        font-size: 16px;
                        color: #666666;
                        letter-spacing: 0;
                        background: #fff;
                        img{
                            vertical-align:middle;
                            &frist-child{

                            }
                        }
                        span{
                            margin-left:20px;
                            vertical-align:middle;
                        }
                        &.active{
                            position:relative;
                            color: #348EFC;
                            background: #E8F2FF;
                            &:after{
                                content:'';
                                position:absolute;
                                width:6px;
                                height:12px;
                                background: url("../../../assets/images/Shape_04.png") center center no-repeat;
                                top:50%;
                                right:20px;
                                transform:translateY(-50%);
                            }
                        }
                        &:hover{
                            cursor:pointer;
                        }
                    }
                }
            }
           
        }
    }
</style>